<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name=keywords content="仿诚信_仿诚信">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
		<meta HTTP-EQUIV="Expires" CONTENT="-1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>仿诚信</title>
		<link rel="shortcut icon" href="img/favicon.ico" />
		<link rel="bookmark" href="img/favicon.ico" type="image/x-icon" 　/>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body class="body height100">
		<div class="main clearfix width100 height100">
			<div class="left main_left">
				<div class="clearfix height100" >
					<div class="left mian_user relative">
				        <p class="mg_top20 text-center"><img class="head" src="img/icon_head.png"/></p>
					    <ul class="mian_user_icon mg_top60">
					    	<li class="active" data-content="msg"><a href="javascript:;"><img src="img/icon_msg.png"/></a></li>
					    	<li data-content="user"><a href="javascript:;" ><img src="img/icon_data.png"/></a></li>
					    </ul>
					    <ul class="absolute add text-center"> <li data-content="friends"><a href="javascript:;" ><img src="img/icon_add.png"/></a></li></ul> 
					</div>
					<div class="left  mian_friends">
						<p class="seach_box text-center relative">
							<input type="text" name="" id="" value="" placeholder="搜索" />
							<img class="absolute seach_img" src="img/icon_seach.png"/>
						</p>
						<ul class="friends_box">
							<li class="active " id="helper">
								<dl class="clearfix">
									<dt class="left"><img class="friends_head" src="img/icon_cx.png"/></dt>
									<dd class="left">
										<p class="color_1a name">城信小助手</p>
										<h6 class="text mg_top5 color_9">欢迎使用城信，快去领取奖励吧...</h6>
									</dd>
								</dl>
								<i class="bage">1</i>
							</li>
							<li id="group_chat">
								<dl class="clearfix">
									<dt class="left"><img class="friends_head" src="img/icon_qun.png"/></dt>
									<dd class="left">
										<p class="color_1a name mg_top10">我的群聊</p>
									</dd>
								</dl>
								<!--<i class="bage">1</i>-->
							</li>
							<li id="new_friends">
								<dl class="clearfix">
									<dt class="left"><img class="friends_head" src="img/icon_fiiends.png"/></dt>
									<dd class="left">
										<p class="color_1a name mg_top10">新的朋友</p>
									</dd>
								</dl>
								<!--<i class="bage">1</i>-->
							</li>
							<li>
								<dl class="clearfix">
									<dt class="left"><img class="friends_head" src="img/icon_head.png"/></dt>
									<dd class="left">
										<p class="color_1a name">欧阳铁柱</p>
										<h6 class="text mg_top5 color_9">得意的笑得意的笑</h6>
									</dd>
								</dl>
								<i class="bage">1</i>
							</li>
							<li>
								<dl class="clearfix">
									<dt class="left"><img class="friends_head" src="img/icon_userhead.png"/></dt>
									<dd class="left">
										<p class="color_1a name">小女子哦</p>
										<h6 class="text mg_top5 color_9">你为什么笑的那么开心</h6>
									</dd>
								</dl>
								<!--<i class="bage">1</i>-->
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="left main_right relative">
				<div class="msg_top">
					<span class="color_1a h4 left msg_name">欧阳铁柱</span>
					<a href="javascript:;"><img src=""/></a>
				</div>
				<!--消息-->
				<div class="main_right_content active" id="msg" data-content='msg'>
					<div class="msg_content">
						<dl class="clearfix msg_left ">
							<dt class="left"><img class="msg_head" src="img/icon_userhead.png"/></dt>
							<dd class="left">
								<div class="msg_box relative">
									<i class="absolute"></i>
									<span class="msg_font">您好，在吗？</span>
								</div>
							</dd>
						</dl>
						<dl class="clearfix msg_right  text_right">
							<dt class="right"><img class="msg_head" src="img/icon_head.png"/></dt>
							<dd class="right">
								<div class="msg_box relative">
									<i class="absolute"></i>
									<span class="msg_font">在呢！请问有什么需要帮助您的吗？</span>
								</div>
							</dd>
						</dl>
						<dl class="clearfix msg_left ">
							<dt class="left"><img class="msg_head" src="img/icon_userhead.png"/></dt>
							<dd class="left">
								<div class="msg_box relative">
									<a href="javascript:;"><img class="msg_img" src="img/img.png" alt="" /></a>
								</div>
							</dd>
						</dl>
					</div>
					<div class="absolute mgs_box">
					<p class="padding_tb10">
						<a href="javascript:;" class="mg_left20"><img src="img/icon_smile.png"/></a>
						<a href="javascript:;" class="mg_left20"><img src="img/icon_img.png"/></a>
					</p>
					<p> <textarea name="" rows="" cols=""  class="msg_inp"></textarea></p>
					<p class="text_right"><a href="javascript:;" class="send">发送</a></p>
				</div>
				</div>
				<!--用户详情-->
				<div class="main_right_content" data-content='user'>
					<div class="user">
						<p class="text-center"><img class="user_head" src="img/icon_userhead.png"/></p>
						<p class="text-center h4 color_1a">欧阳铁柱</p>
						<p class=" mg_top40 laber"><span class="color_9 ">城信号</span><span>15XXXXXXXXXX</span></p>
						<p class=" mg_top10 laber"><span class="color_9 ">地    区</span><span>未设置</span></p>
						<!--已添加好友-->
						<p class="text-center mg_top40"><a href="javascript:;" class="btn-a">发消息</a></p>
						<p class="text-center mg_top10"><a href="javascript:;" class="btn-a bg_yell">删除好友</a></p>
						<!--未添加好友-->
						<p class="text-center mg_top40"><a href="javascript:;" class="btn-a add_frient_btn">添加好友</a></p>
						
					</div>
					
				</div>	
				
				<div class="main_right_content" id="about_friends" data-content='friends'>
					<!--添加好友-->
					<div class="my_friends about_friends active">
						<div class="text-center">
							<p class="add_frient_seach">
								<img src="img/icon_seach.png"/>
								<input type="text" name="" id="" value="" placeholder="请输入手机号/城信号" />
							</p>
						</div>
						<div class="add_frient_box">
							<p>搜索结果：<i id="seach_result">1323XXXXX323</i></p>
							<div class="add_frient">
								<dl class="clearfix">
									<dt class="left"><img class="add_head" src="img/icon_head.png"/></dt>
									<dd class="left mg_top10">
										<div class="clearfix">
											<span class="left mg_left10 color_1a">欧阳铁柱</span>
											<a href="javascript:;" class="right ">已申请</a>
										</div>
									</dd>
								</dl>
								<dl class="clearfix">
									<dt class="left"><img class="add_head" src="img/icon_head.png"/></dt>
									<dd class="left mg_top10">
										<div class="clearfix">
											<span class="left mg_left10 color_1a">欧阳铁柱</span>
											<a href="javascript:;" class="right btn-a">发消息</a>
										</div>
									</dd>
								</dl>
								<dl class="clearfix">
									<dt class="left"><img class="add_head" src="img/icon_head.png"/></dt>
									<dd class="left mg_top10">
										<div class="clearfix">
											<span class="left mg_left10 color_1a">欧阳铁柱</span>
											<a href="javascript:;" class="right btn-a">发消息</a>
										</div>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<!--新的朋友-->
					<div class="new_friends about_friends" >
						<div class="add_frient_box">
							<div class="add_frient ">
								<dl class="clearfix">
									<dt class="left"><img class="add_head" src="img/icon_head.png"/></dt>
									<dd class="left mg_top10">
										<div class="clearfix">
											<span class="left mg_left10 color_1a">欧阳铁柱</span>
											<a href="javascript:;" class="right ">已添加</a>
										</div>
									</dd>
								</dl>
								<dl class="clearfix">
									<dt class="left"><img class="add_head" src="img/icon_head.png"/></dt>
									<dd class="left mg_top10">
										<div class="clearfix">
											<span class="left mg_left10 color_1a">欧阳铁柱</span>
											<a href="javascript:;" class="right btn-a">同意</a>
										</div>
									</dd>
								</dl>
							</div>	
						</div>
					</div>
					<!--我的群聊-->
					<div class="my_qunmsg about_friends">
						<div class="add_frient_box">
							<div class="add_frient ">
								<dl class="clearfix">
									<dt class="left"><img class="add_head" src="img/icon_head.png"/></dt>
									<dd class="left mg_top10">
										<span class="mg_left10 color_1a">欧阳铁柱、上官翠花（2）</span>
									</dd>
								</dl>
								<dl class="clearfix">
									<dt class="left"><img class="add_head" src="img/icon_head.png"/></dt>
									<dd class="left mg_top10">
										<span class="mg_left10 color_1a">欧阳铁柱、上官翠花（2）</span>
									</dd>
								</dl>
							</div>	
						</div>
					</div>
					<!--我的群聊-->
				</div>	
				
			</div>
		</div>
		<div class="mask">
			<h4 class="text-center padding_tb20 h4 color_1a">好友备注</h4>
			<div class="mask_main">
				<textarea name="" rows="" cols=""></textarea>
			</div>
			<div class="text-center mask_foot">
				<a href="javascript:;" onclick="mask_over()">删除</a>
				<a href="javascript:;" class="send_btn">发送</a>
			</div>
		</div>
		<div class="overlay" onclick="mask_over()"></div>
		<div class="msg-spring" ></div>
	</body>
	<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
      $(function(){
      	//发送消息
		$('.send').click(function(){
			var htmlmsg='';
			var msg_inp=$(".msg_inp").val()
			if(msg_inp){
			htmlmsg+='<dl class="clearfix msg_right  text_right">'+
						'<dt class="right"><img class="msg_head" src="img/icon_userhead.png"/></dt>'+
						'<dd class="right">'+
							'<div class="msg_box relative">'+
								'<i class="absolute"></i>'+
								'<span class="msg_font">'+ msg_inp +'</span>'+
							'</div>'+
						'</dd>'+
					'</dl>'
			$('.msg_content').append(htmlmsg)
			$(".msg_inp").val('')
			}else{
				msg('请输入信息')
			}
		})
		//左侧点击事件
		$('.mian_user li').click(function(){
			var content,content_right;
			content=$(this).attr('data-content')
			$('.main_right .main_right_content').removeClass('active')
			$('.main_right .main_right_content').each(function(k,v){
			content_right=$(this).attr('data-content')
				if(content==content_right){
					$(this).addClass('active')
				}
				switch (content){
					case 'msg':
					   $('.msg_name').html('昵称')
						break;
					case 'user':
					   $('.msg_name').html('用户详情')
						break;
					case 'friends':
					$('#about_friends .about_friends').removeClass('active')
					   $('.msg_name').html('添加好友')
					   $('#about_friends .my_friends ').addClass('active')
						break;	
					default:
						break;
				}
			})
			
		})
		//中间列表点击事件
		$('.friends_box').on('click','li',function(){
			var class_name=$(this).attr('id')
			console.log(class_name)
			$(".main_right_content").removeClass('active');
			$('#about_friends').addClass('active')
			$('#about_friends .about_friends').removeClass('active')
			switch (class_name){
				case 'group_chat'://我的群聊
					$('.msg_name').html('我的群聊')
					$('#about_friends .my_qunmsg').addClass('active')
					break;
				case 'new_friends'://新的朋友
					$('.msg_name').html('新的朋友')
					$('#about_friends .new_friends').addClass('active')
					break;
					
				default:
					var name=$(this).children('dl').find('dd').find('.name').html()
					$('.msg_name').html(name)
				    $("#msg").addClass('active')
					break;
			}
			
		})
		//添加好友弹窗
		$('.add_frient_btn').click(function(){
			$('.overlay').show()
			$('.mask').fadeIn(200)
		})
	 })	
	</script>
</html>
